<template>
  <div class="accidentReport">
    <NavBar
      fixed
      placeholder
      title="事故上报"
      z-index="999"
      @click-right="onClickRight"
      ref="nav"
    >
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.push('/home')"
        />
      </template>
      <template #right>
        <!-- <span style="color: #000" @click="toJump"> 查看记录</span> -->
        <!-- <img
          style="width: 0.53rem"
          src="../../../assets/img/history.png"
          @click="toJump"
          alt=""
        /> -->
        <Icon name="notes-o" size="0.53rem" color="#000" @click="toJump" />
      </template>
    </NavBar>
    <div class="main">
      <Field
        v-model="id"
        label="事故类型"
        placeholder="请选择事故类型"
        input-align="right"
        is-link
        required
        readonly
        @click="show = true"
      ></Field>
      <Field
        v-model="info.area"
        label="事故地址"
        placeholder="请输入事故发生地点"
        input-align="right"
        @click="scan"
      >
        <!-- <template #right-icon>
          <Icon name="scan" class="search-icon" />
        </template> -->
      </Field>
      <Cell title="事故描述" />
      <textarea
        v-model="info.rpcName"
        placeholder="请描述想要反馈的问题"
        cols="30"
        rows="10"
      ></textarea>

      <Field
        v-model="info.contactUser"
        required
        label="联系人"
        input-align="right"
      />
      <Field
        v-model="info.mobile"
        label="联系电话"
        required
        input-align="right"
      />
      <Field label="请拍摄现场照片" required class="aa" readonly />
      <Uploader v-model="fileList" multiple :max-count="2" />
      <Cell>
        <Icon name="location" color="#6A6D73" size=".5rem" />
        {{ info.address }}
      </Cell>
    </div>
    <Button class="btn" @click="onSubmit">提交</Button>

    <Popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <Picker
        title="标题"
        show-toolbar
        :columns="columns"
        @confirm="onConfirm"
        @cancel="show = false"
      />
    </Popup>
  </div>
</template>

<script>
import uploadImages from "@/utils/uploadImages.js";
import getPosition from "@/utils/getPosition.js";
import {
  EquipmentRepairServicePost,
  accidentTypes,
  SubmitTheAccident,
} from "@/api/work";
import Layout from "components/Layout";
import {
  NavBar,
  Icon,
  Field,
  Cell,
  Uploader,
  Button,
  Popup,
  Picker,
  Toast,
} from "vant";
export default {
  name: "accidentReport",

  components: {
    Uploader,
    Layout,
    NavBar,
    Icon,
    Field,
    Cell,
    Button,
    Popup,
    Picker,
    Toast,
  },

  directives: {},

  data() {
    return {
      id: "",

      fileList: [],

      show: false,
      columns: [],
      info: {
        eetNo: "",
        autoArea: "",
        rpcName: "",
        // lng: "",
        // lat: "",
        address: "无锡拈花湾景区",
        lng: 120.068788,
        lat: 31.417695,
        area: "",
        mobile: "",
        contactUser: "",
        pic: "",
        orgNo: localStorage.getItem("orgNo"),
      },
    };
  },
  computed: {
    point() {
      return JSON.stringify([this.lng, this.lat]);
    },
  },
  created() {
    let info = JSON.parse(localStorage.getItem("userInfo"));
    // console.log(1234, info);
    this.info.contactUser = info.userName;
    this.info.mobile = info.mobile;
  },
  mounted() {
    this.city();
    this.getMenu();
  },

  methods: {
    async getMenu() {
      const { param } = await accidentTypes();
      console.log(param.data);
      this.columns = param.data;
    },
    //扫一扫事件
    toJump() {
      console.log(1);
      this.$router.push({
        path: "AccidentRecordList",
        query: {},
      });
    },
    onClickLeft() {},
    onClickRight() {},
    toRecordsList() {
      this.$router.push({
        path: "RecordsList",
        query: {},
      });
    },
    scan() {},
    city() {
      getPosition()
        .then((res) => {
          this.info.autoArea = res.address;
          this.info.lng = res.lng;
          this.info.lat = res.lat;
        })
        .catch((err) => {
          console.log(err);
        });

      // this.$geolocation.getCurrentPosition(
      //   (position) => {
      //     console.log(position);
      //     const { lat, lng } = position.point;
      //     const { province, city, district, street, street_number } =
      //       position.address;
      //     this.info.autoArea =
      //       province + city + district + street + street_number;
      //     this.info.lat = lat;
      //     this.info.lng = lng;
      //   },
      //   (e) => {
      //     console.log(e);
      //     this.$toast("定位失败！");
      //   },
      //   { provider: "baidu" }
      // );
    },
    onConfirm(value, index) {
      this.id = value.join(",");
      let index1 = index[0];
      let index2 = index[1];
      this.info.eetNo = this.columns[index1].children[index2].emeNo;
      this.show = false;
    },
    async onSubmit() {
      if (this.id.trim().length <= 0) return Toast.fail("请选择事故类型");
      if (this.info.area.trim().length <= 0)
        return Toast.fail("请输入事故发生地点");
      if (this.info.rpcName.trim().length <= 0)
        return Toast.fail("请描述想要反馈的问题");
      if (this.info.contactUser.trim().length <= 0)
        return Toast.fail("请输入联系人");
      if (this.info.mobile.trim().length <= 0)
        return Toast.fail("请输入联系电话");
      if (this.fileList.length <= 0) return Toast.fail("请拍摄现场照片");

      let pic = await uploadImages(this.fileList);
      this.info.pic = pic.join(","); //照片ID参数
      // this.point //经纬度
      await SubmitTheAccident({
        ...this.info,
      });
      // AccidentRecordList
      this.$router.push({
        path: "AccidentRecordList",
        query: {},
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "~@/style/var.less";
.accidentReport {
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  padding: 30px 0;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .main {
    padding-bottom: 20px;
    background-color: #fff;
    .search-icon {
      color: @primary;
      // margin-top: 8px;
      // margin-left: 8px;
    }
    textarea {
      width: 692px;
      height: 157px;
      margin: 10px 0;
      margin-left: 50%;
      padding: 15px;
      transform: translate(-50%);
      border: 1px solid #dddddd;
      font-size: 26px;
      border-radius: 6px;
    }
    /deep/.van-cell__title span {
      color: black;
    }
    .location-box {
      width: 100%;
      display: flex;
      align-items: center;
      div {
        font-size: 28px;
        color: #999999;
      }
    }
    .van-uploader {
      margin: 20px;
    }
    /deep/.van-uploader__upload {
      border: 2px dashed #e16712;
      width: 110px;
      height: 110px;
      border-radius: 4px;
      background: #fff;
      .van-icon {
        color: rgb(225, 103, 18);
        &::before {
          content: "\F0A2";
        }
      }
    }
  }
  .btn {
    height: 98px;
    position: fixed;
    bottom: 10px;
    left: 50%;
    width: 90%;
    transform: translate(-50%);
    background: #fff;
    border-radius: 6px;
    font-weight: 500;
    color: @primary;
    border: 1px solid @primary;
    font-size: 36px;
  }
  .aa {
    /deep/ .van-field__label {
      width: 80%;
    }
  }
}
</style>